<template>
  <div class="sales-analytics-page">
    <!-- 销售概览卡片 -->
    <el-row :gutter="20" class="overview-cards">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card">
          <div class="card-content">
            <div class="card-icon sales">
              <el-icon size="24"><TrendCharts /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">¥{{ formatNumber(salesOverview.totalSales) }}</div>
              <div class="card-label">总销售额</div>
              <div class="card-trend" :class="salesOverview.salesTrend > 0 ? 'up' : 'down'">
                <el-icon><ArrowUp v-if="salesOverview.salesTrend > 0" /><ArrowDown v-else /></el-icon>
                {{ Math.abs(salesOverview.salesTrend) }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card">
          <div class="card-content">
            <div class="card-icon orders">
              <el-icon size="24"><Document /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ salesOverview.totalOrders }}</div>
              <div class="card-label">总订单数</div>
              <div class="card-trend" :class="salesOverview.ordersTrend > 0 ? 'up' : 'down'">
                <el-icon><ArrowUp v-if="salesOverview.ordersTrend > 0" /><ArrowDown v-else /></el-icon>
                {{ Math.abs(salesOverview.ordersTrend) }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card">
          <div class="card-content">
            <div class="card-icon customers">
              <el-icon size="24"><User /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ salesOverview.totalCustomers }}</div>
              <div class="card-label">总客户数</div>
              <div class="card-trend" :class="salesOverview.customersTrend > 0 ? 'up' : 'down'">
                <el-icon><ArrowUp v-if="salesOverview.customersTrend > 0" /><ArrowDown v-else /></el-icon>
                {{ Math.abs(salesOverview.customersTrend) }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card">
          <div class="card-content">
            <div class="card-icon average">
              <el-icon size="24"><Money /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">¥{{ formatNumber(salesOverview.averageOrder) }}</div>
              <div class="card-label">平均客单价</div>
              <div class="card-trend" :class="salesOverview.averageTrend > 0 ? 'up' : 'down'">
                <el-icon><ArrowUp v-if="salesOverview.averageTrend > 0" /><ArrowDown v-else /></el-icon>
                {{ Math.abs(salesOverview.averageTrend) }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据透视分析主区域 -->
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>销售数据透视分析</h3>
          <div class="header-actions">
            <el-button type="primary" @click="showPivotDialog">
              <el-icon><Grid /></el-icon>
              数据透视
            </el-button>
            <el-button type="success" @click="exportData">
              <el-icon><Download /></el-icon>
              导出数据
            </el-button>
            <el-button type="warning" @click="refreshData">
              <el-icon><Refresh /></el-icon>
              刷新数据
            </el-button>
          </div>
        </div>
      </template>

      <!-- 筛选条件 -->
      <div class="filter-area">
        <el-form :model="filterForm" inline>
          <el-form-item label="时间范围">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              @change="handleFilterChange"
            />
          </el-form-item>
          <el-form-item label="收银员">
            <el-select v-model="filterForm.cashier" placeholder="请选择收银员" clearable @change="handleFilterChange">
              <el-option label="全部" value="" />
              <el-option label="收银员001" value="收银员001" />
              <el-option label="收银员002" value="收银员002" />
              <el-option label="收银员003" value="收银员003" />
            </el-select>
          </el-form-item>
          <el-form-item label="商品分类">
            <el-select v-model="filterForm.category" placeholder="请选择分类" clearable @change="handleFilterChange">
              <el-option label="全部" value="" />
              <el-option label="电子产品" value="电子产品" />
              <el-option label="服装鞋帽" value="服装鞋帽" />
              <el-option label="食品饮料" value="食品饮料" />
              <el-option label="日用品" value="日用品" />
            </el-select>
          </el-form-item>
          <el-form-item label="支付方式">
            <el-select v-model="filterForm.paymentMethod" placeholder="请选择支付方式" clearable @change="handleFilterChange">
              <el-option label="全部" value="" />
              <el-option label="现金支付" value="cash" />
              <el-option label="刷卡支付" value="card" />
              <el-option label="支付宝" value="alipay" />
              <el-option label="微信支付" value="wechat" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <!-- 透视分析结果 -->
      <div class="pivot-results">
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <!-- 销售趋势 -->
          <el-tab-pane label="销售趋势" name="trend">
            <div class="chart-container">
              <div class="chart-header">
                <h4>销售趋势分析</h4>
                <div class="chart-controls">
                  <el-radio-group v-model="trendPeriod" @change="updateTrendChart">
                    <el-radio-button label="day">按日</el-radio-button>
                    <el-radio-button label="week">按周</el-radio-button>
                    <el-radio-button label="month">按月</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div class="chart-content">
                <div class="chart-placeholder">
                  <el-icon size="48"><TrendCharts /></el-icon>
                  <p>销售趋势图表</p>
                  <p class="chart-desc">显示销售额、订单数、客流量等趋势变化</p>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 商品分析 -->
          <el-tab-pane label="商品分析" name="product">
            <div class="analysis-content">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card class="analysis-card">
                    <template #header>
                      <span>商品销售排行</span>
                    </template>
                    <el-table :data="productRanking" border>
                      <el-table-column prop="rank" label="排名" width="60" />
                      <el-table-column prop="name" label="商品名称" width="150" />
                      <el-table-column prop="salesCount" label="销售数量" width="100" />
                      <el-table-column prop="salesAmount" label="销售金额" width="120">
                        <template #default="{ row }">¥{{ formatNumber(row.salesAmount) }}</template>
                      </el-table-column>
                      <el-table-column prop="profit" label="利润" width="100">
                        <template #default="{ row }">¥{{ formatNumber(row.profit) }}</template>
                      </el-table-column>
                    </el-table>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card class="analysis-card">
                    <template #header>
                      <span>分类销售占比</span>
                    </template>
                    <div class="chart-placeholder">
                      <el-icon size="48"><PieChart /></el-icon>
                      <p>分类销售饼图</p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>

          <!-- 收银员分析 -->
          <el-tab-pane label="收银员分析" name="cashier">
            <div class="analysis-content">
              <el-table :data="cashierAnalysis" border>
                <el-table-column prop="cashier" label="收银员" width="120" />
                <el-table-column prop="orderCount" label="订单数量" width="120" />
                <el-table-column prop="salesAmount" label="销售金额" width="120">
                  <template #default="{ row }">¥{{ formatNumber(row.salesAmount) }}</template>
                </el-table-column>
                <el-table-column prop="averageOrder" label="平均客单价" width="120">
                  <template #default="{ row }">¥{{ formatNumber(row.averageOrder) }}</template>
                </el-table-column>
                <el-table-column prop="refundCount" label="退款次数" width="120" />
                <el-table-column prop="refundAmount" label="退款金额" width="120">
                  <template #default="{ row }">¥{{ formatNumber(row.refundAmount) }}</template>
                </el-table-column>
                <el-table-column prop="efficiency" label="效率评分" width="120">
                  <template #default="{ row }">
                    <el-rate v-model="row.efficiency" disabled show-score />
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>

          <!-- 支付分析 -->
          <el-tab-pane label="支付分析" name="payment">
            <div class="analysis-content">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-card class="analysis-card">
                    <template #header>
                      <span>支付方式统计</span>
                    </template>
                    <div class="payment-stats">
                      <div v-for="item in paymentStats" :key="item.method" class="payment-item">
                        <div class="payment-info">
                          <span class="payment-name">{{ item.name }}</span>
                          <span class="payment-count">{{ item.count }}笔</span>
                        </div>
                        <div class="payment-amount">¥{{ formatNumber(item.amount) }}</div>
                        <div class="payment-percentage">{{ item.percentage }}%</div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="12">
                  <el-card class="analysis-card">
                    <template #header>
                      <span>支付方式趋势</span>
                    </template>
                    <div class="chart-placeholder">
                      <el-icon size="48"><TrendCharts /></el-icon>
                      <p>支付方式趋势图</p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>

          <!-- 时间分析 -->
          <el-tab-pane label="时间分析" name="time">
            <div class="analysis-content">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-card class="analysis-card">
                    <template #header>
                      <span>小时销售分布</span>
                    </template>
                    <div class="time-stats">
                      <div v-for="item in hourlyStats" :key="item.hour" class="time-item">
                        <span class="time-hour">{{ item.hour }}:00</span>
                        <div class="time-bar">
                          <div class="time-progress" :style="{ width: item.percentage + '%' }"></div>
                        </div>
                        <span class="time-amount">¥{{ formatNumber(item.amount) }}</span>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="analysis-card">
                    <template #header>
                      <span>星期销售分布</span>
                    </template>
                    <div class="time-stats">
                      <div v-for="item in weeklyStats" :key="item.day" class="time-item">
                        <span class="time-hour">{{ item.day }}</span>
                        <div class="time-bar">
                          <div class="time-progress" :style="{ width: item.percentage + '%' }"></div>
                        </div>
                        <span class="time-amount">¥{{ formatNumber(item.amount) }}</span>
                      </div>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8">
                  <el-card class="analysis-card">
                    <template #header>
                      <span>月度销售对比</span>
                    </template>
                    <div class="chart-placeholder">
                      <el-icon size="48"><BarChart /></el-icon>
                      <p>月度对比柱状图</p>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>

    <!-- 数据透视对话框 -->
    <el-dialog
      v-model="pivotDialogVisible"
      title="数据透视设置"
      width="800px"
    >
      <div class="pivot-dialog-content">
        <el-form :model="pivotForm" label-width="120px">
          <el-form-item label="透视维度">
            <el-checkbox-group v-model="pivotForm.dimensions">
              <el-checkbox label="date">日期</el-checkbox>
              <el-checkbox label="cashier">收银员</el-checkbox>
              <el-checkbox label="category">商品分类</el-checkbox>
              <el-checkbox label="payment">支付方式</el-checkbox>
              <el-checkbox label="product">商品</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          
          <el-form-item label="统计指标">
            <el-checkbox-group v-model="pivotForm.metrics">
              <el-checkbox label="salesAmount">销售金额</el-checkbox>
              <el-checkbox label="orderCount">订单数量</el-checkbox>
              <el-checkbox label="customerCount">客户数量</el-checkbox>
              <el-checkbox label="averageOrder">平均客单价</el-checkbox>
              <el-checkbox label="profit">利润</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          
          <el-form-item label="透视表类型">
            <el-radio-group v-model="pivotForm.type">
              <el-radio label="table">透视表</el-radio>
              <el-radio label="chart">图表</el-radio>
              <el-radio label="both">表格+图表</el-radio>
            </el-radio-group>
          </el-form-item>
          
          <el-form-item label="图表类型" v-if="pivotForm.type !== 'table'">
            <el-select v-model="pivotForm.chartType" placeholder="请选择图表类型">
              <el-option label="柱状图" value="bar" />
              <el-option label="折线图" value="line" />
              <el-option label="饼图" value="pie" />
              <el-option label="散点图" value="scatter" />
              <el-option label="雷达图" value="radar" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      
      <template #footer>
        <el-button @click="pivotDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="generatePivotTable" :loading="pivotLoading">
          生成透视表
        </el-button>
      </template>
    </el-dialog>

    <!-- 透视结果对话框 -->
    <el-dialog
      v-model="pivotResultVisible"
      title="数据透视结果"
      width="90%"
      :close-on-click-modal="false"
    >
      <div class="pivot-result-content">
        <div v-if="pivotForm.type !== 'chart'" class="pivot-table">
          <el-table :data="pivotTableData" border stripe max-height="500">
            <el-table-column 
              v-for="column in pivotTableColumns" 
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              :width="column.width"
            />
          </el-table>
        </div>
        
        <div v-if="pivotForm.type !== 'table'" class="pivot-chart">
          <div class="chart-placeholder">
            <el-icon size="48"><TrendCharts /></el-icon>
            <p>{{ getChartTypeName(pivotForm.chartType) }}</p>
          </div>
        </div>
      </div>
      
      <template #footer>
        <el-button @click="pivotResultVisible = false">关闭</el-button>
        <el-button type="success" @click="exportPivotData">导出数据</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'

// 响应式数据
const activeTab = ref('trend')
const trendPeriod = ref('day')
const pivotDialogVisible = ref(false)
const pivotResultVisible = ref(false)
const pivotLoading = ref(false)

// 筛选表单
const filterForm = reactive({
  dateRange: [],
  cashier: '',
  category: '',
  paymentMethod: ''
})

// 透视表单
const pivotForm = reactive({
  dimensions: ['date', 'cashier'],
  metrics: ['salesAmount', 'orderCount'],
  type: 'both',
  chartType: 'bar'
})

// 销售概览数据
const salesOverview = reactive({
  totalSales: 125680.50,
  totalOrders: 856,
  totalCustomers: 742,
  averageOrder: 146.85,
  salesTrend: 12.5,
  ordersTrend: 8.3,
  customersTrend: 15.2,
  averageTrend: 4.1
})

// 商品排行数据
const productRanking = ref([
  { rank: 1, name: '可口可乐', salesCount: 156, salesAmount: 546.00, profit: 109.20 },
  { rank: 2, name: '洗发水', salesCount: 45, salesAmount: 1345.50, profit: 269.10 },
  { rank: 3, name: 'Nike运动鞋', salesCount: 12, salesAmount: 10788.00, profit: 2157.60 },
  { rank: 4, name: 'iPhone 15', salesCount: 3, salesAmount: 17997.00, profit: 3599.40 },
  { rank: 5, name: 'MacBook Pro', salesCount: 1, salesAmount: 12999.00, profit: 2599.80 }
])

// 收银员分析数据
const cashierAnalysis = ref([
  { cashier: '收银员001', orderCount: 89, salesAmount: 15680.50, averageOrder: 176.18, refundCount: 2, refundAmount: 120.00, efficiency: 4.5 },
  { cashier: '收银员002', orderCount: 67, salesAmount: 10000.00, averageOrder: 149.25, refundCount: 1, refundAmount: 50.00, efficiency: 4.2 },
  { cashier: '收银员003', orderCount: 45, salesAmount: 8500.00, averageOrder: 188.89, refundCount: 0, refundAmount: 0.00, efficiency: 4.8 }
])

// 支付统计数据
const paymentStats = ref([
  { method: 'cash', name: '现金支付', count: 156, amount: 15680.50, percentage: 25.2 },
  { method: 'card', name: '刷卡支付', count: 234, amount: 23400.00, percentage: 37.6 },
  { method: 'alipay', name: '支付宝', count: 189, amount: 18900.00, percentage: 30.4 },
  { method: 'wechat', name: '微信支付', count: 42, amount: 4200.00, percentage: 6.8 }
])

// 小时统计数据
const hourlyStats = ref([
  { hour: 8, amount: 1200, percentage: 15 },
  { hour: 9, amount: 1800, percentage: 22 },
  { hour: 10, amount: 2200, percentage: 28 },
  { hour: 11, amount: 2000, percentage: 25 },
  { hour: 12, amount: 1600, percentage: 20 },
  { hour: 13, amount: 1400, percentage: 18 },
  { hour: 14, amount: 1900, percentage: 24 },
  { hour: 15, amount: 2100, percentage: 26 },
  { hour: 16, amount: 2300, percentage: 29 },
  { hour: 17, amount: 2500, percentage: 31 },
  { hour: 18, amount: 2800, percentage: 35 },
  { hour: 19, amount: 2600, percentage: 33 },
  { hour: 20, amount: 2000, percentage: 25 },
  { hour: 21, amount: 1500, percentage: 19 }
])

// 星期统计数据
const weeklyStats = ref([
  { day: '周一', amount: 8500, percentage: 85 },
  { day: '周二', amount: 9200, percentage: 92 },
  { day: '周三', amount: 8800, percentage: 88 },
  { day: '周四', amount: 9500, percentage: 95 },
  { day: '周五', amount: 12000, percentage: 100 },
  { day: '周六', amount: 15000, percentage: 100 },
  { day: '周日', amount: 13000, percentage: 100 }
])

// 透视表数据
const pivotTableData = ref([])
const pivotTableColumns = ref([])

// 计算属性
const formatNumber = (value) => {
  if (typeof value === 'number') {
    return value.toLocaleString()
  }
  return value
}

// 方法
const handleFilterChange = () => {
  // 根据筛选条件更新数据
  ElMessage.info('数据已更新')
}

const handleTabChange = (tabName) => {
  activeTab.value = tabName
}

const updateTrendChart = () => {
  ElMessage.info(`切换到${trendPeriod.value === 'day' ? '按日' : trendPeriod.value === 'week' ? '按周' : '按月'}视图`)
}

const showPivotDialog = () => {
  pivotDialogVisible.value = true
}

const generatePivotTable = async () => {
  if (pivotForm.dimensions.length === 0 || pivotForm.metrics.length === 0) {
    ElMessage.warning('请选择至少一个维度和一个指标')
    return
  }
  
  pivotLoading.value = true
  
  // 模拟生成透视表
  await new Promise(resolve => setTimeout(resolve, 2000))
  
  // 生成透视表数据
  generatePivotData()
  
  pivotLoading.value = false
  pivotDialogVisible.value = false
  pivotResultVisible.value = true
}

const generatePivotData = () => {
  // 模拟透视表数据生成
  pivotTableColumns.value = [
    { prop: 'dimension', label: '维度', width: 150 },
    { prop: 'salesAmount', label: '销售金额', width: 120 },
    { prop: 'orderCount', label: '订单数量', width: 120 },
    { prop: 'customerCount', label: '客户数量', width: 120 },
    { prop: 'averageOrder', label: '平均客单价', width: 120 }
  ]
  
  pivotTableData.value = [
    { dimension: '2024-01-15', salesAmount: 15680.50, orderCount: 89, customerCount: 78, averageOrder: 176.18 },
    { dimension: '2024-01-16', salesAmount: 18900.00, orderCount: 112, customerCount: 95, averageOrder: 168.75 },
    { dimension: '2024-01-17', salesAmount: 14200.00, orderCount: 85, customerCount: 72, averageOrder: 167.06 },
    { dimension: '2024-01-18', salesAmount: 22100.00, orderCount: 134, customerCount: 118, averageOrder: 164.93 },
    { dimension: '2024-01-19', salesAmount: 19800.00, orderCount: 98, customerCount: 86, averageOrder: 202.04 }
  ]
}

const getChartTypeName = (type) => {
  const typeNames = {
    'bar': '柱状图',
    'line': '折线图',
    'pie': '饼图',
    'scatter': '散点图',
    'radar': '雷达图'
  }
  return typeNames[type] || '图表'
}

const exportData = () => {
  ElMessage.success('数据导出成功')
}

const exportPivotData = () => {
  ElMessage.success('透视数据导出成功')
}

const refreshData = () => {
  ElMessage.success('数据刷新成功')
}

// 生命周期
onMounted(() => {
  // 初始化数据
  const today = new Date()
  const lastWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
  filterForm.dateRange = [
    lastWeek.toISOString().split('T')[0],
    today.toISOString().split('T')[0]
  ]
})
</script>

<style scoped>
.sales-analytics-page {
  padding: 0;
}

.overview-cards {
  margin-bottom: 20px;
}

.overview-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-content {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
}

.card-icon.sales {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.card-icon.orders {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card-icon.customers {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.card-icon.average {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
}

.card-info {
  flex: 1;
}

.card-value {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.card-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 4px;
}

.card-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.card-trend.up {
  color: #67c23a;
}

.card-trend.down {
  color: #f56c6c;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.filter-area {
  margin-bottom: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 4px;
}

.pivot-results {
  margin-top: 20px;
}

.chart-container {
  padding: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h4 {
  margin: 0;
  color: #303133;
}

.chart-content {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fafafa;
}

.chart-placeholder {
  text-align: center;
  color: #909399;
}

.chart-placeholder p {
  margin: 10px 0 0 0;
  font-size: 16px;
}

.chart-desc {
  font-size: 14px !important;
  color: #c0c4cc !important;
}

.analysis-content {
  padding: 20px 0;
}

.analysis-card {
  margin-bottom: 20px;
}

.payment-stats {
  padding: 20px 0;
}

.payment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.payment-item:last-child {
  border-bottom: none;
}

.payment-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.payment-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.payment-count {
  font-size: 12px;
  color: #909399;
}

.payment-amount {
  font-size: 16px;
  font-weight: 600;
  color: #f56c6c;
}

.payment-percentage {
  font-size: 14px;
  color: #67c23a;
  font-weight: 600;
}

.time-stats {
  padding: 20px 0;
}

.time-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.time-hour {
  width: 60px;
  font-size: 12px;
  color: #606266;
}

.time-bar {
  flex: 1;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.time-progress {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #67c23a);
  transition: width 0.3s ease;
}

.time-amount {
  width: 80px;
  text-align: right;
  font-size: 12px;
  color: #606266;
}

.pivot-dialog-content {
  padding: 20px 0;
}

.pivot-result-content {
  padding: 20px 0;
}

.pivot-table {
  margin-bottom: 20px;
}

.pivot-chart {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fafafa;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .overview-cards .el-col {
    margin-bottom: 15px;
  }
  
  .header-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .filter-area .el-form {
    flex-direction: column;
  }
  
  .filter-area .el-form-item {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .analysis-content .el-col {
    margin-bottom: 20px;
  }
  
  .payment-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .time-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .time-bar {
    width: 100%;
  }
}
</style>
